<template>
  <div class="howItWork">
    <Head @showMenu="showMn = true" class="header" />
    <Menu :showMenu="showMn" @closeMenu="showMn = false" />
    <div  class="work-page">
      <div  class="work-title">How it works</div>
      <div  class="work-content">
        <div  class="work-item">
          <img class="work-item-icon" src="/static/img/main/balance.webp" draggable="false"
          />
          <div  class="work-item-title">
            CREATE AN ACCOUNT AND TOP UP YOUR BALANCE
          </div>
          <div  class="work-item-text">
            After logging in to your Rolling boxes account, you’ll see your
            profile icon and balance in the top right corner of the website.
            Click on the yellow plus icon that’s next to your balance. This will
            direct you to the top-up page. Here, you can add credits to your
            RollingBox account using several different payment methods,
            including Credit Cards, Crypto Currency, and Paypal. Next, enter
            your chosen top-up amount and click the “Proceed Checkout” button.
            It’s that simple!
          </div>
          <div  class="work-item-btn" @click="goToBox">START BROWSING »</div>
        </div>
        <div  class="work-item big-img-content">
          <img  class="big-img-top" style="width: 320px;" src="/static/img/main/method-white.svg" draggable="false"
          />
        </div>
        <div  class="work-item">
          <img class="work-item-icon" src="/static/img/main/collections.webp" draggable="false"
          />
          <div  class="work-item-title">
            BROWSE OUR MYSTERY BOXES
          </div>
          <div  class="work-item-text">
            Rolling boxes features a myriad of mystery boxes containing
            luxurious products from exclusive brands such as Nike, Supreme, and
            more. To view all of the mystery boxes the site offers, head over to
            the box listing page, or click the button below. You’re sure to be
            impressed
          </div>
          <div  class="work-item-btn"  @click="goToBox">START BROWSING »</div>
        </div>
        <div  class="work-item big-img-content">
          
           <img  class="big-img" style="width: 245px;" src="/static/img/main/boxes.webp" draggable="false"
          />
        </div>
        <div  class="work-item">
          <img class="work-item-icon" src="/static/img/main/box.webp" draggable="false"
          />
          <div  class="work-item-title">
            CHOOSE AND OPEN YOUR MYSTERY BOX
          </div>
          <div  class="work-item-text">
            With our one-click unboxing process, shopping for your favorite
            products is fun, easy, and instant. Rolling boxes’s product
            guarantee ensures that each item you see on the site has a
            real-world analogue and will be 100% authentic. Each box also
            contains descriptions, pricing, and probabilities for each product,
            so you always know exactly what you’re getting. No hidden fees!
          </div>
          <div  class="work-item-btn" @click="goToBox">START BROWSING »</div>
        </div>
        <div  class="work-item big-img-content">
          
            <img  class="big-img" style="height:140px" src="/static/img/main/opne-box.webp" draggable="false"
          />
        </div>
        <div  class="work-item">
        <img class="work-item-icon" src="/static/img/main/order.webp" draggable="false"
          />
          <div  class="work-item-title">
            SHIP OR EXCHANGE YOUR ITEM
          </div>
          <div  class="work-item-text">
            Getting an item you don't want is never a problem on Rolling boxes.
            If you score big, simply ship the item to your home address, and
            it'll be in your hands in no time. If you'd prefer something else,
            you can exchange it for on-site credit. Gone are the days where
            mystery boxes are filled with garbage - Rolling box provides true
            freedom and liquidity.
          </div>
          <div  class="work-item-btn" @click="goToBox">START BROWSING »</div>
        </div>
        <div  class="work-item big-img-content">
         <img  class="big-img" style="width: 245px;" src="/static/img/main/group-white.webp" draggable="false"
          />
        </div>
        <div  class="work-bottom-title">
          Transparency and openness - our core values
        </div>
        <div  class="work-bottom-text">
          At Rolling boxes, we take pride in continually upholding our core
          tenets. Every mystery box has a list of probabilities for each item,
          so you always know what your chances are - unlike on many similar
          websites.
        </div>
        <div  class="work-bottom-title" style="margin: 0px">
          What are you waiting for?
        </div>
        <div
          
          class="work-bottom-title"
          style="margin: 0px 0px 30px"
        >
          Score some sweet streetwear - only on Rolling box.
        </div>
        <div  class="work-item-btn" @click="goToBox">START BROWSING »</div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/head/header.vue";
import Menu from "@/components/menu";

export default {
  name: "howItWork",
  components: {
    Head,
    Menu,
  },

  mounted() {
    this.active = this.$route.query.type;
  },
  data() {
    return {
      active: 0,
      showMn: false,
      titles: ["ALL", "CONDUCT", "COMPLETED"],
      contacts: ["whatsapp.webp", "telegram.webp", "skype.webp", "ins.webp"],
      data: [],
    };
  },
  methods: {
    goToBox() {
        this.$router.push({
              name:"box"
          })
     
    },
  },
};
</script>

<style lang="scss" scoped>
.howItWork {
  margin-top: 95px;
  height: 100%;
  width: 100%;
  color: var(--text-color);
  //   .header {
  //     position: relative;
  //   }
  .work-page {
        background: var(--main-bc-color);
    padding: 10px;
    .work-title {
      font-size: 22px;
      padding: 30px 0;
      text-align: center;
    }
    .work-content {
      width: 100%;
      max-width: 900px;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 40px;
      .work-item-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
        object-fit: contain;
      }
      .work-item {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }
      .work-bottom-title {
        font-size: 24px;
        margin: 30px 0;
        font-weight: 500;
        text-align: center;
        width: 100%;
      }
      .work-bottom-text {
        font-size: 16px;
        text-align: center;
        margin-bottom: 40px;
      }
      .work-item-btn {
        background: linear-gradient(109deg, #f48836, #f4364c);
        color: #fff;
        width: 170px;
        height: 45px;
        border-radius: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
      }
    }
  }
}
</style>